<div class="member-manage">
  <div class="member-manage-head">
    <span class="head-left">
      <!-- <nz-breadcrumb nzSeparator=">">
        <nz-breadcrumb-item>
          项目
        </nz-breadcrumb-item>
        <nz-breadcrumb-item>
          {{projectName}}
        </nz-breadcrumb-item>
        <nz-breadcrumb-item>
          成员列表
        </nz-breadcrumb-item>
      </nz-breadcrumb> -->

      <a [routerLink]="['/outer/project-type']" class="breadcrumb">
        项目
      </a>
      <i nz-icon type="right" theme="outline"></i>
      <a (click)="routeToSurvey()" class="breadcrumb">
        {{projectName}}
      </a>
      <b>
        <i nz-icon type="right" theme="outline"></i>
        成员列表
      </b>
    </span>
    <div style="width: 200px;  float: right; min-width: 260px;">
      <nz-input-group nzSearch [nzSuffix]="suffixButton">
        <input maxlength="50" type="text" nz-input placeholder="请输入关键字" (keyup)="keyupEvent($event)" [(ngModel)]="status.filter" />
      </nz-input-group>
      <ng-template #suffixButton>
        <button nz-button nzType="primary" nzSearch (click)="searchEvent()">搜索</button>
      </ng-template>
    </div>
    <span class="common-bread-search">
      <button style="margin-right:20px; float: right" nz-button [nzType]="'primary'" *ngIf="status.PIpageAuthorty.PIProjectUser"  (click)="addRole()">
        添加成员
      </button>
      <button style="margin-right:20px; float: right" nz-button [disabled]="status.delBtnStatus" *ngIf="status.PIpageAuthorty.PIProjectUser"  [nzType]="'primary'"
        (click)="delmembers()">
        批量删除
      </button>
    </span>




  </div>
  <div class="member-manage-body">
    <!-- <nz-spin [nzTip]="" [nzSpinning]=""> -->
    <!-- <div class="common-table-wrap auto"> -->
      <div class="body">
        <nz-table #basicTable [nzData]="" [nzShowPagination]="false" [nzScroll]="{ y: '560px' }">
          <thead style="background-color:rgba(0, 0, 0, 0.651); overflow-y:hidden;">
            <tr>
              <th nzWidth="2%" nzShowCheckbox [(nzChecked)]="status.allChecked" [nzIndeterminate]="status.indeterminate"
                (nzCheckedChange)="checkAll($event)"></th>
              <th nzWidth="8%">序号</th>
              <th nzWidth="10%">姓名</th>
              <th nzWidth="12%">所属公司</th>
              <th nzWidth="12%">联系方式</th>
              <th nzWidth="12%">岗位</th>
              <th nzWidth="12%">加入时间</th>
              <th nzWidth="12%">操作</th>
            </tr>
          </thead>
          <tbody class="zzj-scrollbar">
            <tr *ngFor="let data of status.dataList;let idx = index">
              <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="refreshCheckboxStatus()"></td>
              <td>{{idx+1}}</td>
              <td> {{data.name}} <span style="color:#ccc" *ngIf="data.userId == this.createUserId">(项目创建人)</span></td>
              <td>{{data.organizationUnitName || '-'}}</td>
              <td>{{data.phoneNumber}}</td>
              <td>{{data.position || '-'}}</td>
              <td>{{data.creationTime | DateTransformPipe }}</td>
              <!-- <td>{{data.isActive?"启用":'禁用'}}</td> -->
              <!-- <td>
                <nz-switch nzSize="small" (click)="clickSwitch(data)" [nzControl]="false" [ngModel]="data.isActive"
                  [nzLoading]="status.isLoding" [nzDisabled]='status.statusDisabled' nzCheckedChildren="启用"
                  nzUnCheckedChildren="禁用"></nz-switch>
              </td> -->
              <td>
                <a href="javascript:;"  *ngIf="status.PIpageAuthorty.PIProjectUser"  (click)="editRole(data)" title="编辑">
                  <i nz-icon class="icon" type="form"></i>
                </a>
                <nz-divider nzType="vertical" *ngIf="status.PIpageAuthorty.PIProjectUser && this.createUserId != data.userId"></nz-divider>
                <a href="javascript:;" *ngIf="status.PIpageAuthorty.PIProjectUser && this.createUserId != data.userId"  (click)="delRole(data)" title="删除">
                  <i nz-icon class="icon" type="delete"></i>
                </a>
              </td>
            </tr>
          </tbody>
        </nz-table>
      </div>
      <div class="pager">
        <nz-pagination [(nzPageIndex)]="status.pager.pageIndex" [nzTotal]="status.pager.totalPages"
          [nzShowTotal]="rangeTemplate" nzShowQuickJumper [nzPageSize]="status.pager.pageSize"
          (nzPageIndexChange)="pageIndexChange($event)" (nzPageSizeChange)="pageSizeChange($event)">
        </nz-pagination>
        <!-- <ng-template #renderItemTemplate let-type let-page="page">
          <a *ngIf="type === 'pre'">上页</a>
          <a *ngIf="type === 'next'">下页</a>
          <a *ngIf="type === 'page'">{{ page }}</a>
        </ng-template> -->
        <ng-template #rangeTemplate let-total>
          共 {{total}} 条
        </ng-template>
      </div>
    <!-- </div> -->
  </div>
  <!-- </nz-spin> -->
    <!-- 编辑新建模态框 -->
    <nz-modal [(nzVisible)]="status.isadd || status.isedit" (nzOnCancel)="cancelAddOredit()" nzWidth="880"  [nzFooter]="modalFooter"
     [nzTitle]="status.isadd?'添加成员':'编辑成员'" [nzStyle]="{ top: '200px' }">
    <div nz-row>
      <label nz-col nzSpan="4" style="line-height: 32px;text-align: right">人员：</label>
      <nz-select style="width:283px" (ngModelChange)="selChange($event)" [nzDisabled]= "status.canChange" [(ngModel)]="status.memberValue"
        [compareWith]="compareFn" nzPlaceHolder="请选择人员">
        <nz-option *ngFor="let option of status.memberOptions" [nzLabel]="option.label" [nzValue]="option">
        </nz-option>
      </nz-select> <span style="color:red;vertical-align: top;margin-left: 8px;">*</span>
    </div>
    <div nz-row style="margin-top:20px">
      <label nz-col nzSpan="4" style="line-height: 32px;text-align: right">岗位：</label>
      <input  maxlength="50" nz-col nzSpan="20" nz-input [(ngModel)]="status.member.job" style="width: 60%; margin-right:8px;"
        placeholder="人员岗位"> 
        <span style="color:red">*</span>
    </div>
    <div class="form-rows  static" style="margin-top:20px;" name="form-child">
      <label class="rows-lab" style="margin-left:68px;text-align: right">权限分配：</label>
      <span class="rows-inp">
        <span class="rows-inp-child-group" *ngFor="let data of status.authority;">
          <label class="rows-lab full rows-lab-icon">
            {{data.text}}
          </label>
          <span class="rows-inp full">
            <nz-checkbox-group [nzDisabled]='status.cantModify' [(ngModel)]="data.group"></nz-checkbox-group>
          </span>
        </span>
      </span>
    </div>
    
    <ng-template #modalFooter>
      <span></span>
      <!-- <button nz-button nzType="default"
        (click)="(status.isadd=false) || (status.isedit=false && status.title=null && status.description=null)">取消</button> -->
      <button nz-button nzType="primary" (click)="status.isadd?addSave():editSave()"
        [nzLoading]="isOkLoading">保存</button>
    </ng-template>
  </nz-modal>
    <!-- 弹出框（删除） -->
    <nz-modal [(nzVisible)]="status.isDelete" nzTitle="删除组织" nzOkText="确定" nzCancelText="取消" (nzOnOk)="delNode()"
      (nzOnCancel)="Canceldel()">
      <!-- <p>确定删除 {{status.editNode.name}} 吗？</p> -->
      <p style="color:red">删除后不能恢复，请谨慎操作。</p>
    </nz-modal>
  </div>